<!-- 订单购买页 -->
<template>
  <section style="padding-bottom: 100px;">

    <van-swipe :autoplay="3000" indicator-color="#fff">
      <van-swipe-item v-for="(image, index) in titlePicList" :key="index">
        <img :src="image.name.indexOf('http')!=-1?image.name:downloadUrl+'?fileName='+image.name" style="width: 7.5rem;height: 7.5rem;"/>
      </van-swipe-item>
    </van-swipe>

    <div class="goods-header" type="base-info-block">
      <div class="goods-title" style="padding-right: 44px; position: relative;">
        <div class="goods-title__main">
          <span>{{goods.title}}</span>
        </div>
        <div class="goods-title__more" v-if="goods.isFav == 0">
          <div class="js-open-share goods-title__more-item" @click="addFav(goods)">
            <i class="van-icon van-icon-like-o" style="color: rgb(255, 68, 68); font-size: 18px;"><!----></i>
            <div style="color: rgb(255, 68, 68);" class="goods-title__more-item-word">收藏</div>
          </div>
        </div>

        <div class="goods-title__more" v-if="goods.isFav == 1">
          <div class="js-open-share goods-title__more-item">
            <div style="color: #ccc;" class="goods-title__more-item-word">已经</div>
            <div style="color: #ccc;" class="goods-title__more-item-word">收藏</div>
          </div>
        </div>

      </div>
      <div class="goods-price">
        <div class="goods-price__current theme__color">
          <i class="goods-price__current-price-text">{{goods.nowPrice | regexMoney}}</i>
        </div>
      </div>
      <div class="goods-stock van-row">
        <div class="van-col van-col--8">
          运费:
          <span class="goods-stock__postage">免运费</span>
        </div>
        <!--<div class="van-col van-col&#45;&#45;8" style="text-align: center;">-->
          <!--剩余:<span class="goods-stock__postage">充足</span>-->
        <!--</div>-->

        <div class="van-col van-col--8" style="text-align: right;">
          参与人数:<span class="goods-stock__pmoostage">{{goods.buyNum}}</span>
        </div>
      </div>
    </div>

    <van-cell value="配送方式：快递" />

    <div>
      <img class="img-list" v-for="img in picList" :src="img.name"/>
    </div>

    <van-goods-action>
      <van-goods-action-icon
        @click="goHome();"
        icon="wap-home"
        text="首页"
      />

      <van-goods-action-button
        type="warning"
        text="查看商品规格"
        @click="handlerSku();"
      />
      <van-goods-action-button
        type="danger"
        :text="goods.gameNum+'元闯关购'"
        @click="goGame(goods);"
      />
    </van-goods-action>

    <!--look sku-->
    <van-sku
      :quota="1"
      v-model="showSku"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :hide-stock="sku.hide_stock">
      <template slot="sku-actions" slot-scope="props">
        <div class="van-sku-actions">
          <van-button
            square
            size="large"
            type="danger"
            @click="goGame(goods);">
            {{goods.gameNum}}元闯关购
          </van-button>
        </div>
      </template>
    </van-sku>
    <!--look sku-->

    <reCharge v-if="showRecharge" :goodsId="goodsId" :amount="amount" @close="showRecharge = false;"></reCharge>

  </section>
</template>
<script>
  import {Dialog} from 'vant';
  import goodsService from '../../api/goodsService';
  import Api from '../../api/api';
  import reCharge from '../commonComponents/reCharge';
  export default {
    name:'goodsDetail',
    components: {
      reCharge
    },
    data() {
      return {
        isFav:0,
        winHeight:'',
        amount:'',
        showRecharge:false,
        goods:{},
        downloadUrl:Api.download,
        goodsId:'',
        showSku:false,
        id:'',
        titlePicList:[],
        picList:[],
        sku: {},
      }
    },
    methods: {
      addFav(item) {
        goodsService.addFav({goodsId:item.id}).then((rsp)=>{
          if(rsp.result) {
          item.isFav = 1;
          this.$toast('收藏成功，请到个人中心-》我的收藏查看');
        }else {
          this.$toast(rsp.errorMsg);
        }
      }).catch((error)=>{
          this.$toast('addFav接口异常'+error);
      });
      },
      goGame(item) {
        Dialog.confirm({
          messageAlign:'left',
          title: '闯关提示',
          message: '<span style="color: #f44;">闯关将消耗'+item.gameNum+'金币；闯过三关即可赢得该商品；闯关失败将获取'+item.gameNum+'积分，积分可以用来兑换商品</span>',
          confirmButtonText:'马上去闯关',
          cancelButtonText:'在看看'
        }).then(() => {
          this._judgeMoney(item);
      }).catch(() => {
        });
      },
      _judgeMoney(item) {
        goodsService.judgeMoney({goodsId:item.id}).then((rsp)=>{
          if(rsp.result) {
          if(rsp.errorCode == 2){
            this.amount = rsp.obj;
            Dialog.confirm({
              title: '提示',
              message: '您的余额不足',
              confirmButtonText:'去充值'
            }).then(() => {
              this.showRecharge = true;
          }).catch(() => {
            });
          }else if(rsp.errorCode == 3){
            Dialog.alert({
              title: '提示',
              message: '您的积分已经可以兑换该商品，无需在闯关'
            }).then(() => {
              // on close
            });
          }else {
            var srcurl = window.location.origin + window.location.pathname+'?winHeight='+this.winHeight+'&vt='+new Date().getTime() + '#/game?goodsId='+item.id+'&num='+item.gameNum;
            window.location.href = srcurl;
            // this.$nocacheRouter('/game?goodsId='+item.id);
          }
        }else {
          this.$toast(rsp.errorMsg);
        }
      }).catch((error)=>{
          this.$toast('judgeMoney接口异常'+error);
      });
      },
      goHome(){
        var url = window.location.origin + window.location.pathname+'?vt='+new Date().getTime() + '#/index?auth=1';
        window.location.href = url;
      },
      handlerSku(){
        this.showSku = true;
        goodsService.getSku({id:this.id}).then((rsp)=>{
          if(rsp.result) {
          this.colorList = [];
          this.sizeList = [];
          this.colorSizeItemList = [];
          let colors = rsp.obj.colorList;
          let sizes = rsp.obj.sizeList;
          let colorSizeItems = rsp.obj.colorSizeItemList;
          for(let i=0;i<colors.length;i++) {
            let color = {
              id: colors[i].id,
              name: colors[i].color,
              imgUrl: colors[i].pic.indexOf('http') != -1?colors[i].pic:this.downloadUrl+'?fileName='+colors[i].pic
            };
            this.colorList.push(color);
          }

          for(let i=0;i<sizes.length;i++) {
            let size = {
              id: sizes[i].id,
              name: sizes[i].size,
              imgUrl: ''
            };
            this.sizeList.push(size);
          }

          for(let i=0;i<colorSizeItems.length;i++) {
            let colorSizeItem = {
              id: colorSizeItems[i].id,
              price:colorSizeItems[i].price*100,
              stock_num:colorSizeItems[i].stockNum,
              s1:colorSizeItems[i].colorId,
              s2:colorSizeItems[i].sizeId
            };
            this.colorSizeItemList.push(colorSizeItem);
          }
          this.sku = {
            tree: [
              {
                k: '颜色',
                v: this.colorList,
                k_s: 's1'
              },
              {
                k: '尺码',
                v: this.sizeList,
                k_s: 's2'
              }
            ],
            list: this.colorSizeItemList,
            price: this.goods.nowPrice,
            stock_num: this.goods.buyNum
          };

        }else {
          this.$toast(rsp.errorMsg);
        }
      }).catch((error)=>{
          this.$toast('getSku接口异常'+error);
      });
      },

      _getDetail() {
        goodsService.get({id:this.id}).then((rsp)=>{
          this.winHeight = window.innerHeight;
          if(rsp.result) {
            this.titlePicList = rsp.obj.titlePicList;
            if(this.titlePicList[0].name.indexOf('http') != -1) {
              rsp.obj.goods.picture = this.titlePicList[0].name;
            } else {
              rsp.obj.goods.picture = this.downloadUrl+'?fileName='+this.titlePicList[0].name;
            }
            this.goods = rsp.obj.goods;
            this.goodsId = this.goods.id;
            let pics = rsp.obj.picList;
            for(let i =0;i<pics.length;i++) {
              let picName = pics[i].name;
              if(picName.indexOf("http") == -1) {
                pics[i].name = this.downloadUrl+'?fileName='+pics[i].name;
              }

            }
            this.picList = rsp.obj.picList;

          }else {
            this.$toast(rsp.errorMsg);
          }
      }).catch((error)=>{
          this.$toast('get接口异常'+error);
      });
      },
    },

    mounted(){
      this.id = this.$route.query.id;
      this.isFav = this.$route.query.isFav;
      this._getDetail();
    }
  };
</script>
<style scoped>

  .img-list {
    font-size: 0;
    display: block;
    max-width: 100%;
  }

  .goods-header {
    position: relative;
    margin-bottom: 10px;
    background-color: #fff;
  }

  .goods-title {
    padding: 10px 10px 0;
  }

  .goods-title__main {
    display: inline;
    font-size: 16px;
    line-height: 22px;
    text-align: left;
    word-break: break-all;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .goods-title__main span {
    vertical-align: middle;
    cursor: pointer;
  }

  .goods-title__more {
    position: absolute;
    right: 10px;
    top: 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
  }

  .goods-title__more-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    margin-left: 10px;
    width: 24px;
  }

  .goods-title__more-item-word {
    font-size: 10px;
    color: #666;
    height: 12px;
    line-height: 12px;
    margin-top: 1px;
  }

  .goods-price {
    padding: 10px;
    text-align: left;
  }

  .default-theme .theme__color {
    color: #f44!important;
  }

  .goods-price__current {
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
    font-size: 14px;
    color: #f44;
  }

  .goods-price__current span {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
  }

  .goods-price__current-price-text {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    font-style: normal;
  }

  .goods-stock {
    position: relative;
    padding: 0 10px;
    line-height: 12px;
    background-color: #fff;
    font-size: 12px;
    color: #999;
  }

  .goods-stock .van-col {
    padding: 10px 0;
  }

  .van-col--8 {
    width: 33.33333333%;
  }

  .van-col {
    float: left;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .goods-stock__postage {
    display: inline-block;
  }

  .goods-stock .stock-critical {
    color: red;
  }

</style>
